<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="学生姓名" prop="name">
        <el-input v-model="dataForm.name" placeholder="学生姓名"></el-input>
      </el-form-item>
      <el-form-item label="所属院校">
        <el-select v-model="dataForm.schoolId" placeholder="所属院校" @change="getClassBySchoolId">
          <el-option label="--所属院校--" value=""></el-option>
          <el-option v-for="s in schoolList" :key="s.id" :label="s.name" :value="s.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="所属班级">
        <el-select v-model="dataForm.classId" placeholder="所属班级" @change="getClassName">
          <el-option label="--所属班级--" value=""></el-option>
          <el-option v-for="s in classList" :key="s.id" :label="s.name" :value="s.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专业名称" prop="major">
        <el-input v-model="dataForm.major" placeholder="专业名称"></el-input>
      </el-form-item>
      <el-form-item label="当前课程">
        <el-select v-model="dataForm.courseId" placeholder="当前课程" @change="getCourseName">
          <el-option label="--当前课程--" value=""></el-option>
          <el-option v-for="s in courseList" :key="s.id" :label="s.name" :value="s.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别" prop="name">
       <el-select v-model="dataForm.sex" placeholder="性别">
         <el-option label="--请选择性别--" value=""></el-option>
         <el-option value="男" label="男" ></el-option>
         <el-option value="女" label="女" ></el-option>
       </el-select>
      </el-form-item>
      <el-form-item label="身份证号" prop="cardId">
        <el-input v-model="dataForm.cardId" placeholder="身份证号码"></el-input>
      </el-form-item>

      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="dataForm.phone" placeholder="手机号码"></el-input>
      </el-form-item>

      <el-form-item label="入校时间" prop="startDate">
        <el-date-picker v-model="dataForm.startDate"  type="year" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>

  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        dataForm: {
          id: 0,
          classId: '',
          className: '',
          schoolId: '',
          schoolName: '',
          name: '',
          sex: '',
          cardId: '',
          phone: '',
          major: '',
          startDate: '',
          courseId:'',
          courseName:''
        },
        schoolList: [],
        classList: [],
        courseList:[]
      }
    },
    methods: {
      init(id, row, schoolList) {
        console.log("----:"+id);
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
        });

        if (this.dataForm.id != 0) {
          //const cname = row.cname;
          this.$http({
            url: this.$http.adornUrl(`/sys/student/selectById`),
            method: 'get',
            params: this.$http.adornParams({id:this.dataForm.id}, false)
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              console.log(data.data);
              this.dataForm = data.data;
            }
          })
        } else {
          //this.dataForm = {}
        }
        this.schoolList = schoolList || [];
        this.getAllCourse();//获取所有课程
      },
      getClassBySchoolId:function(schoolId){
        //通过院校获取班级
        this.$http({
        	url: this.$http.adornUrl('/sys/classes/getClassesBySchoolId'),
        	method: 'get',
        	params: this.$http.adornParams({schoolId:schoolId}, false),
        }).then(({
        	data
        }) => {
        	if (data && data.code === 0) {
            console.log(data);
        		this.classList = data.data;
        	} else {
        		this.classList = []
        	}
        	this.dataListLoading = false
        });
        var schoolItem = this.schoolList.find((item)=>{
            return item.id === schoolId;

        });
         this.dataForm.schoolName = schoolItem.name;

      },
      getClassName:function(id){
        //获取班级名称
        var schoolItem = this.schoolList.find((item)=>{
            return item.id === id;

        });
         this.dataForm.className = schoolItem.name;

      },
      getCourseName:function(id){
        //获取课程名称
        var schoolItem = this.schoolList.find((item)=>{
            return item.id === id;

        });
         this.dataForm.courseName = schoolItem.name;

      },
      getAllCourse:function(){
        //获取所有课程
        this.$http({
        	url: this.$http.adornUrl('/course/getAllCourse'),
        	method: 'get',
        	params: this.$http.adornParams({}, false),
        }).then(({
        	data
        }) => {
        	if (data && data.code === 0) {
        		this.courseList = data.data;
        	} else {
        		this.courseList = []
        	}
        	this.dataListLoading = false
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            console.log(this.dataForm);
            this.$http({
              url: this.$http.adornUrl(`/sys/student/${this.dataForm.id == 0 ? 'addStudents' : 'updateStudents'}`),
              method: 'post',
              data: this.$http.adornData({
                  'id': this.dataForm.id || undefined,
                  'classId': this.dataForm.classId,
                  'className': this.dataForm.className,
                  'schoolId': this.dataForm.schoolId,
                  'schoolName': this.dataForm.schoolName,
                  'name': this.dataForm.name,
                  'sex': this.dataForm.sex,
                  'cardId': this.dataForm.cardId,
                  'phone': this.dataForm.phone,
                  'major': this.dataForm.major,
                  'startDate': this.dataForm.startDate,
                  'courseId':this.dataForm.courseId,
                  'courseName':this.dataForm.courseName,
                  'status':0
                },
                false
              )
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
